﻿<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5
Version: 1.6.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <meta charset="utf-8" />
    <title>Data Pickers</title>

    <meta name="description" content="Form Elements Data Pickers" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Fonts-->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">

    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
    <link href="assets/css/demo.min.css" rel="stylesheet" />
    <link href="assets/css/typicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="" rel="stylesheet" type="text/css" />

    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
	
	<script src="assets/js/react/react.js"></script>
    <script src="assets/js/react/react-dom.js"></script>
    <script src="assets/js/react/browser.min.js"></script>
</head>
<!-- /Head -->
<!-- Body -->
<body>

    <div id="content">
	</div>
	
	<script type="text/babel">
	var NavbarBrand = React.createClass({
		render: function() {
			return (
			  <div className="navbar-header pull-left">
                    <a href="#" className="navbar-brand">
                        <small>
                            <img src="assets/img/logo.png" alt="" />
                        </small>
                    </a>
                </div>
			);
		 }
	});
	
	var SideBar = React.createClass({
		handleClick: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			if (!$('#sidebar').is(':visible'))
            $("#sidebar").toggleClass("hide");
			$("#sidebar").toggleClass("menu-compact");
			$(".sidebar-collapse").toggleClass("active");
			b = $("#sidebar").hasClass("menu-compact");

			if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
				$(".sidebar-menu").slimScroll({ destroy: true });
				$(".sidebar-menu").attr('style', '');
			}
			if (b) {
				$(".open > .submenu").removeClass("open");
			} else {
				if ($('.page-sidebar').hasClass('sidebar-fixed')) {
					var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
					$('.sidebar-menu').slimscroll({
						height: 'auto',
						position: position,
						size: '3px',
						color: themeprimary
					});
				}
			}	
		},
		render: function() {
			return (
			  <div className="sidebar-collapse" id="sidebar-collapse" onClick={this.handleClick}>
                    <i className="collapse-icon fa fa-bars"></i>
                </div>
			);
		 }
	});
	
	var AccountItem = React.createClass({
		render: function() {
			return (
			  <li>
                  <a href="#">
                   <div className="clearfix">
					   <div className="notification-icon">
						<i className="fa fa-phone bg-themeprimary white"></i>
					   </div>
					   <div className="notification-body">
						<span className="title">{this.props.title}</span>
						<span className="description">{this.props.desc}</span>
					   </div>
					   <div className="notification-extra">
						 <i className="fa fa-clock-o themeprimary"></i>
						 <span className="description">{this.props.extra}</span>
						</div>
                   </div>
                  </a>
              </li>
			);
		 }
	});
	
	var MessageItem = React.createClass({
		render: function() {
			return (
			  <li>
				<a href="#">
                    <img src="assets/img/avatars/divyia.jpg" className="message-avatar" alt="Divyia Austin" />
                    <div className="message">
                        <span className="message-sender">
							{this.props.sender}
                        </span>
                        <span className="message-time">
							{this.props.time}
                        </span>
                        <span className="message-subject">
							{this.props.subject}
                        </span>
                        <span className="message-body">
							{this.props.body}
                        </span>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var TaskItem = React.createClass({
		render: function() {
			return (
			  <li>
                <a href="#">
                    <div className="clearfix">
                        <span className="pull-left">{this.props.title}</span>
                        <span className="pull-right">{this.props.percent}</span>
                    </div>
                    <div className="progress progress-xs">
						<div style={{width:'65%'}} className="progress-bar"></div>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var NavbarHeaderRight = React.createClass({
		chatClick: function (e) {
			$('.page-chatbar').toggleClass('open');
			$("#chat-link").toggleClass('open');
		},
		createCookie: function (e) {
			alert("hello");
			if (100) {
				var date = new Date();
				date.setTime(date.getTime() + (100 * 24 * 60 * 60 * 1000));
				var expires = "; expires=" + date.toGMTString();
			}
			else var expires = "";
			document.cookie = e + expires + "; path=/";
		},
		readCookie: function (e) {
			alert("hello");
			var nameEq = e + "=";
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') c = c.substring(1, c.length);
				if (c.indexOf(nameEq) == 0) return c.substring(nameEq.length, c.length);
			}
			return null;
		},

		setCookiesForFixedSettings :function () {
			alert("hello");
			createCookie("navbar-fixed-top"+ "=" + $('#checkbox_fixednavbar').is(':checked'));
			createCookie("sidebar-fixed" + "=" + $('#checkbox_fixedsidebar').is(':checked'));
			createCookie("breadcrumbs-fixed"+"="+ $('#checkbox_fixedbreadcrumbs').is(':checked'));
			createCookie("page-header-fixed"+"="+ $('#checkbox_fixedheader').is(':checked'));

			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			if ($('#checkbox_fixedsidebar').is(':checked')) {
				if (!$('.page-sidebar').hasClass('menu-compact')) {
					//Slim Scrolling for Sidebar Menu in fix state
					$('.sidebar-menu').slimscroll({
						position: position,
						size: '3px',
						color: themeprimary,
						height: $(window).height() - 90,
					});
				}
			} else {
				if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
					$(".sidebar-menu").slimScroll({ destroy: true });
					$(".sidebar-menu").attr('style', '');
				}
			}
		},
		initiateSettings: function (e) {
			
			if (readCookie("navbar-fixed-top") != null) {
				if (readCookie("navbar-fixed-top") == "true") {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').addClass('navbar-fixed-top');
				}
			}

			if (readCookie("sidebar-fixed") != null) {
				if (readCookie("sidebar-fixed") == "true") {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').addClass('sidebar-fixed');

					if (!$(".page-sidebar").hasClass("menu-compact")) {
						var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
						$('.sidebar-menu').slimscroll({
							height: $(window).height() - 90,
							position: position,
							size: '3px',
							color: themeprimary
						});
					}
				}
			}
			if (readCookie("breadcrumbs-fixed") != null) {
				if (readCookie("breadcrumbs-fixed") == "true") {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').addClass('breadcrumbs-fixed');
				}
			}
			if (readCookie("page-header-fixed") != null) {
				if (readCookie("page-header-fixed") == "true") {
					$('#checkbox_fixedheader').prop('checked', true);
					$('.page-header').addClass('page-header-fixed');
				}
			}

			$('#checkbox_fixednavbar').change(function () {
				$('.navbar').toggleClass('navbar-fixed-top');
				if (($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', false);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}

				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}

				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});

			$('#checkbox_fixedsidebar').change(function () {
				$('.page-sidebar').toggleClass('sidebar-fixed');
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedbreadcrumbs').change(function () {
				$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedheader').change(function () {
				$('.page-header').toggleClass('page-header-fixed');
				if (!($('#checkbox_fixedbreadcrumbs').is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				setCookiesForFixedSettings();
			});
		},
		settingsClick: function (e) {
			$('.navbar-account').toggleClass('setting-open');
		},
		componentDidMount: function() {
			this.initiateSettings();
		},
		render: function() {
			return (
			  <div className="navbar-header pull-right">
                    <div className="navbar-account">
                        <ul className="account-area">
                            <li>
                                <a className=" dropdown-toggle" data-toggle="dropdown" title="Notifications" href="#">
                                    <i className="icon fa fa-warning"></i>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
                                    <AccountItem title="Skype meeting with Patty" desc="01:00 pm" extra="office" />
									<AccountItem title="Uncharted break" desc="03:30 pm - 05:15 pm" extra="" />
									<AccountItem title="Kate birthday party" desc="08:30 pm" extra="at home" />
									<AccountItem title="Dinner with friends" desc="10:30 pm" extra="" />
                                    <li className="dropdown-footer ">
                                        <span>
                                            Today, March 28
                                        </span>
                                        <span className="pull-right">
                                            10°c
                                            <i className="wi wi-cloudy"></i>
                                        </span>
                                    </li>
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Mails" href="#">
                                    <i className="icon fa fa-envelope"></i>
                                    <span className="badge">3</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-messages">
                                    <MessageItem sender="Divyia Austin" time="2 minutes ago" subject="Here's the recipe for apple pie" body="to identify the sending application when the senders image is shown for the main icon" />
									<MessageItem sender="Bing.com" time="Yesterday" subject="Bing Newsletter: The January Issue‏" body="Discover new music just in time for the Grammy® Awards." />
									<MessageItem sender="Nicolas" time="Friday, September 22" subject="New 4K Cameras" body="The 4K revolution has come over the horizon and is reaching the general populous" />
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
                                    <i className="icon fa fa-tasks"></i>
                                    <span className="badge">4</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
                                    <li className="dropdown-header bordered-darkorange">
                                        <i className="fa fa-tasks"></i>
                                        4 Tasks In Progress
                                    </li>
                                    <TaskItem title="Account Creation" percent="65%" />
									<TaskItem title="Profile Data" percent="35%" />
									<TaskItem title="Updating Resume" percent="75%" />
									<TaskItem title="Adding Contacts" percent="10%" />
                                    <li className="dropdown-footer">
                                        <a href="#">
                                            See All Tasks
                                        </a>
                                        <button className="btn btn-xs btn-default shiny darkorange icon-only pull-right"><i className="fa fa-check"></i></button>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a className="wave in" id="chat-link" title="Chat" href="#" onClick={this.chatClick}>
                                    <i className="icon glyphicon glyphicon-comment"></i>
                                </a>
                            </li>
                            <li>
                                <a className="login-area dropdown-toggle" data-toggle="dropdown">
                                    <div className="avatar" title="View your public profile">
                                        <img src="assets/img/avatars/adam-jansen.jpg" />
                                    </div>
                                    <section>
                                        <h2><span className="profile"><span>David Stevenson</span></span></h2>
                                    </section>
                                </a>
                                
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                    <li className="username"><a>David Stevenson</a></li>
                                    <li className="email"><a>David.Stevenson@live.com</a></li>
                                    
                                    <li>
                                        <div className="avatar-area">
                                            <img src="assets/img/avatars/adam-jansen.jpg" className="avatar" />
                                            <span className="caption">Change Photo</span>
                                        </div>
                                    </li>
                                    
                                    <li className="edit">
                                        <a href="profile.html" className="pull-left">Profile</a>
                                        <a href="#" className="pull-right">Setting</a>
                                    </li>
                                    
                                    <li className="theme-area">
                                        <ul className="colorpicker" id="skin-changer">
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#5DB2FF'}} rel="assets/css/skins/blue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#2dc3e8'}} rel="assets/css/skins/azure.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#03B3B2'}} rel="assets/css/skins/teal.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#53a93f'}} rel="assets/css/skins/green.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#FF8F32'}} rel="assets/css/skins/orange.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#cc324b'}} rel="assets/css/skins/pink.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#AC193D'}} rel="assets/css/skins/darkred.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#8C0095'}} rel="assets/css/skins/purple.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#0072C6'}} rel="assets/css/skins/darkblue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#585858'}} rel="assets/css/skins/gray.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#474544'}} rel="assets/css/skins/black.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#001940'}} rel="assets/css/skins/deepblue.min.css"></a></li>
                                        </ul>
                                    </li>
                                    
                                    <li className="dropdown-footer">
                                        <a href="login.html">
                                            Sign out
                                        </a>
                                    </li>
                                </ul>
                                
                            </li>
                            
                        </ul>
						<div className="setting">
                            <a id="btn-setting" title="Setting" href="#" onClick={this.settingsClick}>
                                <i className="icon glyphicon glyphicon-cog"></i>
                            </a>
                        </div>
						<div className="setting-container">
                            <label>
                                <input type="checkbox" id="checkbox_fixednavbar" />
                                <span className="text">Fixed Navbar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedsidebar" />
                                <span className="text">Fixed SideBar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedbreadcrumbs" />
                                <span className="text">Fixed BreadCrumbs</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedheader" />
                                <span className="text">Fixed Header</span>
                            </label>
                        </div>
                        
                    </div>
                </div>
			);
		 }
	});
	
	var Navbar = React.createClass({
		render: function() {
			return (
				<div className="navbar">
					<div className="navbar-inner">
						<div className="navbar-container">
							<NavbarBrand />
							<SideBar />
							<NavbarHeaderRight />
						</div>
					</div>
				</div>
			);
		 }
	});
	
	var MenuItemIcon = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
					<i className="menu-icon fa fa-th"></i>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var MenuItem = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var ParentMenuIcon = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <i className="menu-icon fa fa-desktop"></i>
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var ParentMenu = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var PageSidebar = React.createClass({
		bodyClickHandler: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			var menuLink = $(e.target).closest("a");
			if (!menuLink || menuLink.length == 0)
				return;
			if (!menuLink.hasClass("menu-dropdown")) {
				if (b && menuLink.get(0).parentNode.parentNode == this) {
					var menuText = menuLink.find(".menu-text").get(0);
					if (e.target != menuText && !$.contains(menuText, e.target)) {
						return false;
					}
				}
				return;
			}
			var submenu = menuLink.next().get(0);
			if (!$(submenu).is(":visible")) {
				var c = $(submenu.parentNode).closest("ul");
				if (b && c.hasClass("sidebar-menu"))
					return;
				c.find("> .open > .submenu")
					.each(function () {
						if (this != submenu && !$(this.parentNode).hasClass("active"))
							$(this).slideUp(200).parent().removeClass("open");
					});
			}
			if (b && $(submenu.parentNode.parentNode).hasClass("sidebar-menu"))
				return false;
			$(submenu).slideToggle(200).parent().toggleClass("open");
			return false;
		},
		render: function() {
			return (
				<div className="page-sidebar" id="sidebar">
                
                <div className="sidebar-header-wrapper">
					<input type="text" className="searchinput" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                </div>
                
                <ul className="nav sidebar-menu" onClick={this.bodyClickHandler}>
                    
                    <li>
                        <MenuItemIcon href="index.html" text="Dashboard" />
                    </li>
                    
                    <li>
                        <MenuItemIcon href="databoxes.html" text="Data Boxes" />
                    </li>
                    
                    <li>
                        <MenuItemIcon href="widgets.html" text="Widgets" />
                    </li>
                    
                    <li>
						<ParentMenuIcon text="Elements" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="elements.html" text="Basic Elements" />
                            </li>
                            <li>
								<ParentMenu text="Icons" />

                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="font-awesome.html" text="Font Awesome" />
                                    </li>
                                    <li>
										<MenuItemIcon href="glyph-icons.html" text="Glyph Icons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="typicon.html" text="Typicons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="weather-icons.html" text="Weather Icons" />
                                    </li>
                                </ul>
                            </li>
                            <li>
								<MenuItem href="tabs.html" text="Tabs & Accordions" />
                            </li>
                            <li>
								<MenuItem href="alerts.html" text="Alerts & Tooltips" />
                            </li>
                            <li>
								<MenuItem href="modals.html" text="Modals & Wells" />
                            </li>
                            <li>
								<MenuItem href="buttons.html" text="Buttons" />
                            </li>
                            <li>
								<MenuItem href="nestable-list.html" text="Nestable List" />
                            </li>
                            <li>
								<MenuItem href="treeview.html" text="Treeview" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Tables" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="tables-simple.html" text="Simple & Responsive" />
                            </li>
                            <li>
								<MenuItem href="tables-data.html" text="Data Tables" />
                            </li>
                        </ul>
                    </li>
                    <li className="active open">
						<ParentMenuIcon text="Forms" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="form-layouts.html" text="Form Layouts" />
                            </li>

                            <li>
								<MenuItem href="form-inputs.html" text="Form Inputs" />
                            </li>

                            <li className="active">
								<MenuItem href="form-pickers.html" text="Data Pickers" />
                            </li>
                            <li>
								<MenuItem href="form-wizard.html" text="Wizard" />
                            </li>
                            <li>
								<MenuItem href="form-validation.html" text="Validation" />
                            </li>
                            <li>
								<MenuItem href="form-editors.html" text="Editors" />
                            </li>
                            <li>
								<MenuItem href="form-inputmask.html" text="Input Mask" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Charts" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="flot.html" text="Flot Charts" />
                            </li>

                            <li>
								<MenuItem href="morris.html" text="Morris Charts" />
                            </li>
                            <li>
								<MenuItem href="sparkline.html" text="Sparkline Charts" />
                            </li>
                            <li>
								<MenuItem href="easypiecharts.html" text="Easy Pie Charts" />
                            </li>
                            <li>
								<MenuItem href="chartjs.html" text="ChartJS" />
                            </li>
                        </ul>
                    </li>

                    <li>
						<MenuItemIcon href="profile.html" text="Profile" />
                    </li>
	
                    <li>
						<ParentMenuIcon text="Mail" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="inbox.html" text="Inbox" />
                            </li>

                            <li>
								<MenuItem href="message-view.html" text="View Message" />
                            </li>
                            <li>
								<MenuItem href="message-compose.html" text="Compose Message" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="calendar.html" text="Calendar" />
                    </li>

                    <li>
						<ParentMenuIcon text="Pages" />
                        <ul className="submenu">
                            <li>
								<MenuItem href="timeline.html" text="Timeline" />
                            </li>
                            <li>
								<MenuItem href="pricing.html" text="Pricing Tables" />
                            </li>

                            <li>
								<MenuItem href="invoice.html" text="Invoice" />
                            </li>

                            <li>
								<MenuItem href="login.html" text="Login" />
                            </li>
                            <li>
								<MenuItem href="register.html" text="Register" />
                            </li>
                            <li>
								<MenuItem href="lock.html" text="Lock Screen" />
                            </li>
                            <li>
								<MenuItem href="typography.html" text="Typography" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="More Pages" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="error-404.html" text="Error 404" />
                            </li>

                            <li>
								<MenuItem href="error-500.html" text="Error 500" />
                            </li>
                            <li>
								<MenuItem href="blank.html" text="Blank Page" />
                            </li>
                            <li>
								<MenuItem href="grid.html" text="Grid" />
                            </li>
                            <li>
								<ParentMenu text="Multi Level Menu" />
                                
                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="#" text="Level 3" />
                                    </li>

                                    <li>
										<ParentMenuIcon text="Level 4" />

                                        <ul className="submenu">
                                            <li>
												<MenuItemIcon href="#" text="Some Item" />
                                            </li>

                                            <li>
												<MenuItemIcon href="#" text="Another Item" />
                                            </li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </li>

                    <li>
						<ParentMenuIcon text="Right to Left" />
                        <ul className="submenu">
                            <li>
                                <a>
                                    <span className="menu-text">RTL</span>
                                    <label className="pull-right margin-top-10">
                                        <input id="rtl-changer" className="checkbox-slider slider-icon colored-primary" type="checkbox" />
                                        <span className="text"></span>
                                    </label>
                                </a>
                            </li>
                            <li>
								<MenuItem href="index-rtl-ar.html" text="Arabic Layout" />
                            </li>

                            <li>
								<MenuItem href="index-rtl-fa.html" text="Persian Layout" />
                            </li>

                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="versions.html" text="BeyondAdmin Versions" />
                    </li>
                </ul>
            </div>
			);
		 }
	});
	
	var Contact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').hide();
			$('.page-chatbar .chatbar-messages').show();
		},
		render: function() {
			return (
				<li className="contact" onClick={this.handleClick}>
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/John-Smith.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
							<div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.last}
                        </div>
                    </div>
                </li>
			);
		 }
	});
	
	var ContactList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-contacts .contacts-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (86 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="contacts-list">
					<Contact name="Divyia Philips" status="online" last="last week" />
					<Contact name="Adam Johnson" status="left 4 mins ago" last="today" />
					<Contact name="John Smith" status="online" last="1:57 am" />
					<Contact name="Osvaldus Valutis" status="online" last="today" />
					<Contact name="Javi Jimenez" status="online" last="today" />
					<Contact name="Stephanie Walter" status="online" last="yesterday" />
					<Contact name="Sergey Azovskiy" status="offline since oct 24" last="22 oct" />
					<Contact name="Lee Munroe" status="online" last="today" />
					<Contact name="Divyia Philips" status="online" last="last week" />
                </ul>
			);
		 }
	});
	
	var ContactSearch = React.createClass({
		render: function() {
			return (
				<div className="contacts-search">
                    <input type="text" className="searchinput" placeholder="Search Contacts" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Your Contacts and Chat History</div>
                </div>
			);
		 }
	});
	
	var ChatContact = React.createClass({
		render: function() {
			return (
				<div className="chatbar-contacts">
					<ContactSearch />
					<ContactList />
				</div>
			);
		 }
	});
	
	var ChatMessage = React.createClass({
		render: function() {
			return (
				<li className="message">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatReply = React.createClass({
		render: function() {
			return (
				<li className="message reply">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-messages .messages-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (250 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="messages-list">
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                    <ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                 </ul>
			);
		 }
	});
	
	var ChatSend = React.createClass({
		render: function() {
			return (
				<div className="send-message">
                    <span className="input-icon icon-right">
                        <textarea rows="4" className="form-control" placeholder="Type your message"></textarea>
                        <i className="fa fa-camera themeprimary"></i>
                    </span>
                </div>
			);
		 }
	});
	
	var ChatBarContact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').show();
			$('.page-chatbar .chatbar-messages').hide();
		},
		render: function() {
			return (
				<div className="messages-contact">
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/divyia.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
                            <div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.time}
                        </div>
                        <div className="back" onClick={this.handleClick}>
                            <i className="fa fa-arrow-circle-left"></i>
                        </div>
                    </div>
                </div>
			);
		 }
	});
	
	var ChatBarMessage = React.createClass({
		render: function() {
			return (
				<div className="chatbar-messages" style={{display: 'none'}}>
					<ChatBarContact name="Divyia Philips" status="online" time="a moment ago" />
					<ChatList />
					<ChatSend />
				</div>
			);
		 }
	});
	
	var ChatBar = React.createClass({
		render: function() {
			return (
				<div id="chatbar" className="page-chatbar">
					<ChatContact />
					<ChatBarMessage />
				</div>
			);
		 }
	});
	
	var FirstRow = React.createClass({
		componentDidMount: function() {
			$("#e1").select2();
			$("#e2").select2({placeholder: "Select a State",allowClear: true});
			$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-palegreen">Jquery Select2</div>
							<div>
								<h6>Single Select With Search</h6>
								<select id="e1" style={{"width":"100%"}}>
									<option value="AL">Alabama</option>
									<option value="AK" >Alaska</option>
									<option value="AZ" >Arizona</option>
									<option value="AR" >Arkansas</option>
									<option value="CA" >California</option>
									<option value="CO" >Colorado</option>
									<option value="CT" >Connecticut</option>
									<option value="DE" >Delaware</option>
									<option value="FL" >Florida</option>
									<option value="GA" >Georgia</option>
									<option value="HI" >Hawaii</option>
									<option value="ID" >Idaho</option>
									<option value="IL" >Illinois</option>
									<option value="IN" >Indiana</option>
									<option value="IA" >Iowa</option>
									<option value="KS" >Kansas</option>
									<option value="KY" >Kentucky</option>
									<option value="LA" >Louisiana</option>
									<option value="ME" >Maine</option>
									<option value="MD" >Maryland</option>
									<option value="MA" >Massachusetts</option>
									<option value="MI" >Michigan</option>
									<option value="MN" >Minnesota</option>
									<option value="MS" >Mississippi</option>
									<option value="MO" >Missouri</option>
									<option value="MT" >Montana</option>
									<option value="NE" >Nebraska</option>
									<option value="NV" >Nevada</option>
									<option value="NH" >New Hampshire</option>
									<option value="NJ" >New Jersey</option>
									<option value="NM" >New Mexico</option>
									<option value="NY" >New York</option>
									<option value="NC" >North Carolina</option>
									<option value="ND" >North Dakota</option>
									<option value="OH" >Ohio</option>
									<option value="OK" >Oklahoma</option>
									<option value="OR" >Oregon</option>
									<option value="PA" >Pennsylvania</option>
									<option value="RI" >Rhode Island</option>
									<option value="SC" >South Carolina</option>
									<option value="SD" >South Dakota</option>
									<option value="TN" >Tennessee</option>
									<option value="TX" >Texas</option>
									<option value="UT" >Utah</option>
									<option value="VT" >Vermont</option>
									<option value="VA" >Virginia</option>
									<option value="WA" >Washington</option>
									<option value="WV" >West Virginia</option>
									<option value="WI" >Wisconsin</option>
									<option value="WY" >Wyoming</option>
								</select>
								<hr className="wide" />
								<h6>Multiple Select</h6>
								<select id="e2" multiple="multiple" style={{"width": "100%"}}>
									<option value="AL" >Alabama</option>
									<option value="AK" >Alaska</option>
									<option value="AZ" >Arizona</option>
									<option value="AR" >Arkansas</option>
									<option value="CA" >California</option>
									<option value="CO" >Colorado</option>
									<option value="CT" >Connecticut</option>
									<option value="DE" >Delaware</option>
									<option value="FL" >Florida</option>
									<option value="GA" >Georgia</option>
									<option value="HI" >Hawaii</option>
									<option value="ID" >Idaho</option>
									<option value="IL" >Illinois</option>
									<option value="IN" >Indiana</option>
									<option value="IA" >Iowa</option>
									<option value="KS" >Kansas</option>
									<option value="KY" >Kentucky</option>
									<option value="LA" >Louisiana</option>
									<option value="ME" >Maine</option>
									<option value="MD" >Maryland</option>
									<option value="MA" >Massachusetts</option>
									<option value="MI" >Michigan</option>
									<option value="MN" >Minnesota</option>
									<option value="MS" >Mississippi</option>
									<option value="MO" >Missouri</option>
									<option value="MT" >Montana</option>
									<option value="NE" >Nebraska</option>
									<option value="NV" >Nevada</option>
									<option value="NH" >New Hampshire</option>
									<option value="NJ" >New Jersey</option>
									<option value="NM" >New Mexico</option>
									<option value="NY" >New York</option>
									<option value="NC" >North Carolina</option>
									<option value="ND" >North Dakota</option>
									<option value="OH" >Ohio</option>
									<option value="OK" >Oklahoma</option>
									<option value="OR" >Oregon</option>
									<option value="PA" >Pennsylvania</option>
									<option value="RI" >Rhode Island</option>
									<option value="SC" >South Carolina</option>
									<option value="SD" >South Dakota</option>
									<option value="TN" >Tennessee</option>
									<option value="TX" >Texas</option>
									<option value="UT" >Utah</option>
									<option value="VT" >Vermont</option>
									<option value="VA" >Virginia</option>
									<option value="WA" >Washington</option>
									<option value="WV" >West Virginia</option>
									<option value="WI" >Wisconsin</option>
									<option value="WY" >Wyoming</option>
								</select>
							</div>
						</div>
					</div>
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-darkorange">Bootstrap Tags Input</div>
							<div>
								<input type="text" value="Amsterdam" data-role="tagsinput" placeholder="Add tags" />
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var SecondRow = React.createClass({
		componentDidMount: function() {
			$('.date-picker').datepicker();
			$('#timepicker1').timepicker();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-pink">Bootstrap Date Picker</div>
							<div>
								<div className="input-group">
									<input className="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy"/>
									<span className="input-group-addon">
										<i className="fa fa-calendar"></i>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-blue">Bootstrap Time Picker</div>
							<div>
								<div className="input-group">
									<input className="form-control" id="timepicker1" type="text"/>
									<span className="input-group-addon">
										<i className="fa fa-clock-o"></i>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var ThirdRow = React.createClass({
		componentDidMount: function() {
			$('#reservation').daterangepicker();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-yellow">Bootstrap Range Date Picker</div>
							<div className="form-group">
								<label for="reservation">Reservation dates</label>
								<div className="controls">
									<div className="input-group">
										<span className="input-group-addon">
											<i className="fa fa-calendar"></i>
										</span><input type="text" className="form-control" id="reservation" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var FourthRow = React.createClass({
		componentDidMount: function() {
			$('#textareaanimated').autosize({ append: "\n" });
			$('.spinbox').spinbox();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-darkpink">Text Area</div>
							<h6>Default Text Area</h6>
							<textarea className="form-control" rows="6" id="form-field-8" placeholder="Default Text"></textarea>
							<hr className="wide" />
							<h6>AutoSize Text Area With Animation</h6>
							<textarea className="form-control" id="textareaanimated" placeholder="Write Something to See Autosize Function"></textarea>
						</div>
					</div>
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-palegreen">Spinbox Controls</div>
							<h6>Vertical Spinboxs</h6>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-12">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control" value="1"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up blue">
												<i className="fa fa-chevron-up"></i>
											</button>
											<button type="button" className="btn spinbox-down danger">
												<i className="fa fa-chevron-down"></i>
											</button>
										</div>
									</div>

								</div>
								<div className="col-lg-6 col-sm-6 col-xs-12">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up blue">
												<i className="fa fa-angle-up"></i>
											</button>
											<button type="button" className="btn spinbox-down darkorange">
												<i className="fa fa-angle-down"></i>
											</button>
										</div>
									</div>
								</div>
							</div>
							<div className="horizontal-space"></div>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up success">
												<i className="fa fa-angle-up"></i>
											</button>
											<button type="button" className="btn spinbox-down danger">
												<i className="fa fa-angle-down"></i>
											</button>
										</div>
									</div>

								</div>
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up maroon">
												<i className="fa fa-angle-up"></i>
											</button>
											<button type="button" className="btn spinbox-down magenta">
												<i className="fa fa-angle-down"></i>
											</button>
										</div>
									</div>
								</div>
							</div>
							<div className="horizontal-space"></div>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up darkcarbon">
												<i className="fa fa-arrow-up"></i>
											</button>
											<button type="button" className="btn spinbox-down sonic-silver">
												<i className="fa fa-arrow-down"></i>
											</button>
										</div>
									</div>

								</div>
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox spinbox-right">
										<div className="spinbox-buttons	btn-group btn-group-vertical ">
											<button type="button" className="btn spinbox-up success">
												<i className="fa fa-plus"></i>
											</button>
											<button type="button" className="btn spinbox-down danger">
												<i className="fa fa-minus"></i>
											</button>
										</div>
										<input type="text" className="spinbox-input form-control"/>
									</div>
								</div>
							</div>
							<div className="horizontal-space"></div>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group btn-group-vertical">
											<button type="button" className="btn spinbox-up success">
												<i className="fa fa-chevron-up"></i>
											</button>
											<button type="button" className="btn spinbox-down danger">
												<i className="fa fa-chevron-down"></i>
											</button>
										</div>
									</div>
								</div>
								<div className="col-lg-6 col-sm-6 col-xs-6">
								</div>
							</div>
							<div className="horizontal-space"></div>
							<h6>Horizontal Spinbox</h6>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox spinbox-horizontal">
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group">

											<button type="button" className="btn spinbox-down blueberry">
												<i className="fa fa-minus"></i>
											</button>
											<button type="button" className="btn spinbox-up purple">
												<i className="fa fa-plus"></i>
											</button>
										</div>
									</div>
								</div>
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox spinbox-horizontal spinbox-right">
										<div className="spinbox-buttons	btn-group">
											<button type="button" className="btn spinbox-down blueberry">
												<i className="fa fa-minus"></i>
											</button>
											<button type="button" className="btn spinbox-up purple">
												<i className="fa fa-plus"></i>
											</button>
										</div>
										<input type="text" className="spinbox-input form-control"/>

									</div>
								</div>
							</div>
							<div className="horizontal-space"></div>
							<h6>Two-Sided Horizontal Spinbox</h6>
							<div className="row">
								<div className="col-lg-6 col-sm-6 col-xs-6">
									<div className="spinbox spinbox-horizontal spinbox-two-sided">
										<div className="spinbox-buttons	btn-group spinbox-buttons-left">
											<button type="button" className="btn spinbox-down danger">
												<i className="fa fa-minus"></i>
											</button>
										</div>
										<input type="text" className="spinbox-input form-control"/>
										<div className="spinbox-buttons	btn-group spinbox-buttons-right">
											<button type="button" className="btn spinbox-up blue">
												<i className="fa fa-plus"></i>
											</button>
										</div>
									</div>

								</div>
								<div className="col-lg-6 col-sm-6 col-xs-6">
								</div>
							</div>

						</div>
					</div>
				</div>
			);
		}
	});
	
	var FifthRow = React.createClass({
		componentDidMount: function() {
			$('.dropzone').dropzone();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-12">
						<div className="well with-header">
							<div className="header bordered-darkpink">File Uploader with preview</div>
							<form action="/upload" className="dropzone"></form>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var SixthRow = React.createClass({
		componentDidMount: function() {
			$(".knob").knob();
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-2 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-darkorange">Previous Value</div>
							<div className="knob-container">
								<input className="knob" data-width="75" data-displayprevious="true" data-fgcolor="#ed4e2a" data-cursor="true" value="75" data-thickness=".2"/>
							</div>
						</div>
					</div>
					<div className="col-lg-2 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-warning">Color and Size</div>
							<div className="knob-container">
								<input className="knob" data-width="100" data-cursor="true" data-fgcolor="#f4b400" data-thickness=".25" value="29"/>
							</div>
						</div>
					</div>
					<div className="col-lg-4 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-blue"> Angle offset</div>
							<div className="knob-container">
								<input className="knob" data-angleoffset="90" data-linecap="round" data-fgcolor="#5DB2FF" value="15" data-thickness=".25"/>
							</div>
						</div>
					</div>
					<div className="col-lg-4 col-sm-6 col-xs-12">
						<div className="well with-header">
							<div className="header bordered-palegreen">Angle offset and arc</div>
							<div className="knob-container">
								<input className="knob" data-angleoffset="-125" data-anglearc="250" data-fgcolor="#8cc474" data-rotation="clockwise" value="35" data-thickness=".25"/>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var SeventhRow = React.createClass({
		componentDidMount: function() {
			$('.colorpicker').each(function () {
				$(this).minicolors({
					control: $(this).attr('data-control') || 'hue',
					defaultValue: $(this).attr('data-defaultValue') || '',
					inline: $(this).attr('data-inline') === 'true',
					letterCase: $(this).attr('data-letterCase') || 'lowercase',
					opacity: $(this).attr('data-opacity'),
					position: $(this).attr('data-position') || 'bottom left',
					change: function (hex, opacity) {
						if (!hex) return;
						if (opacity) hex += ', ' + opacity;
						try {
							console.log(hex);
						} catch (e) { }
					},
					theme: 'bootstrap'
				});
			});
			
			$("#sample-minimal").noUiSlider({
				range: [0, 100],
				start: [20, 80],
				connect: true,
				serialization: {
					mark: ',',
					resolution: 0.1,
					to: [[$("#minimal-label1"), 'html'],
						  [$('#minimal-label2'), 'html']]
				}
			});

			$("#sample-onehandle").noUiSlider({
				range: [20, 100],
				start: 40,
				step: 20,
				handles: 1,
				connect: "lower",
				serialization: {
					to: [$("#low"), 'html']
				}
			});
			$("#sample-onehandle-upper").noUiSlider({
				range: [20, 100],
				start: 70,
				step: 20,
				handles: 1,
				connect: "upper",
				serialization: {
					to: [$("#low"), 'html']
				}
			});
			$('.slider').noUiSlider({
				range: [0, 255],
				start: 127,
				handles: 1,
				connect: "lower",
				orientation: "vertical",
				serialization: {
					resolution: 1
				}
				, slide: function () {

					var color = 'rgb(' + $("#red").val()
						 + ',' + $("#green").val()
						 + ',' + $("#blue").val()
						 + ')';

					$(".result").css({
						background: color
						, color: color
					});
				}
			});

			$(".sized-slider").noUiSlider({
				range: [0, 100],
				start: 50,
				handles: 1,
				connect: "lower",
				serialization: {
					to: [$("#low"), 'html']
				}
			});

			$(".colored-slider").noUiSlider({
				range: [0, 100],
				start: 30,
				handles: 1,
				connect: "lower",
				serialization: {
					to: [$("#low"), 'html']
				}
			});
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<h5 className="row-title before-blueberry"><i className="fa fa-picture-o blueberry"></i>jQuery MiniColors</h5>
						<div className="well bordered-top bordered-blueberry">
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="hue-demo">Hue (default)</label>
										<input type="text" id="hue-demo" className="form-control colorpicker" data-control="hue" value="#ff6161"/>
									</div>
									<div className="form-group">
										<label for="saturation-demo">Saturation</label>
										<input type="text" id="saturation-demo" className="form-control colorpicker" data-control="saturation" value="#0088cc"/>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="brightness-demo">Brightness</label>
										<input type="text" id="brightness-demo" className="form-control colorpicker" data-control="brightness" value="#00ffff"/>
									</div>
									<div className="form-group">
										<label for="wheel-demo">Wheel</label>
										<input type="text" id="wheel-demo" className="form-control colorpicker" data-control="wheel" value="#ff99ee"/>
									</div>
								</div>
							</div>
							<hr className="wide" />
							<h5>Input Modes</h5>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="text-field">Text field</label>
										<br/>
										<input type="text" id="text-field" className="form-control colorpicker" value="#70c24a"/>
									</div>
									<div className="form-group">
										<label for="hidden-input">Hidden Input</label>
										<br/>
										<input type="hidden" id="hidden-input" className="colorpicker" value="#5DB2FF" style={{"width":"34px"}}/>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="inline">Inline</label>
										<br/>
										<input type="text" id="inline" className="form-control colorpicker" data-inline="true" value="#4fc8db"/>
									</div>
								</div>
							</div>
							<hr className="wide" />
							<h5>Positions</h5>
							<p>
								Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>
									top
									left
								</code>, and <code>top right</code>.
							</p>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="position-bottom-left">bottom left (default)</label>
										<input type="text" id="position-bottom-left" className="form-control colorpicker" data-position="bottom left" value="#11a9cc"/>
									</div>
									<div className="form-group">
										<label for="position-top-left">top left</label>
										<input type="text" id="position-top-left" className="form-control colorpicker" data-position="top left" value="#8cc474"/>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="position-bottom-right">bottom right</label>
										<input type="text" id="position-bottom-right" className="form-control colorpicker" data-position="bottom right" value="#f4b400"/>
									</div>
									<div className="form-group">
										<label for="position-top-right">top right</label>
										<input type="text" id="position-top-right" className="form-control colorpicker" data-position="top right" value="#bc5679"/>
									</div>
								</div>
							</div>
							<hr className="wide" />
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="opacity">Opacity</label>
										<br/>
										<input type="text" id="opacity" className="form-control colorpicker" data-opacity=".5" value="#766fa8"/>
										<span className="help-block">
											Opacity can be assigned by including the <code>data-opacity</code> attribute
											or by setting the <code>opacity</code> option to <code>true</code>.
										</span>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="default-value">Default Value</label>
										<br/>
										<input type="text" id="default-value" className="form-control colorpicker" data-defaultvalue="#ff6600"/>
										<span className="help-block">
											This field has a default value assigned to it, so it will never be empty.
										</span>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="letter-case">Letter Case</label>
										<br/>
										<input type="text" id="letter-case" className="form-control colorpicker" data-lettercase="uppercase" value="#abcdef"/>
										<span className="help-block">
											This field will always be uppercase.
										</span>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="col-lg-12 col-sm-12 col-xs-12">
									<div className="form-group">
										<label for="letter-case">Letter Case</label>
										<br/>
										<input type="text" id="letter-case" className="form-control colorpicker" data-lettercase="uppercase" value="#abcdef"/>
										<span className="help-block">
											This field will always be uppercase.
										</span>
									</div>
								</div>
							</div>
							<hr className="wide" />
							<h5>Simple ColorPicker</h5>
							<select data-toggle="simplecolorpicker">
								<option value="#ac725e" >#ac725e</option>
								<option value="#d06b64" >#d06b64</option>
								<option value="#f83a22" >#f83a22</option>
								<option value="#fa573c" >#fa573c</option>
								<option value="#ff7537" >#ff7537</option>
								<option value="#ffad46" selected="" >#ffad46</option>
								<option value="#42d692" >#42d692</option>
								<option value="#16a765" >#16a765</option>
								<option value="#7bd148" >#7bd148</option>
								<option value="#b3dc6c" >#b3dc6c</option>
								<option value="#fbe983" >#fbe983</option>
								<option value="#fad165" >#fad165</option>
								<option value="#92e1c0" >#92e1c0</option>
								<option value="#9fe1e7" >#9fe1e7</option>
								<option value="#9fc6e7" >#9fc6e7</option>
								<option value="#4986e7" >#4986e7</option>
								<option value="#9a9cff" >#9a9cff</option>
								<option value="#b99aff" >#b99aff</option>
								<option value="#c2c2c2" >#c2c2c2</option>
								<option value="#cabdbf" >#cabdbf</option>
								<option value="#cca6ac" >#cca6ac</option>
								<option value="#f691b2" >#f691b2</option>
								<option value="#cd74e6" >#cd74e6</option>
								<option value="#a47ae2" >#a47ae2</option>
								<option value="#555" >#555</option>
							</select>
						</div>
					</div>
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<h5 className="row-title before-darkpink"><i className="fa fa-exchange darkpink"></i>noUiSlider: Simple Lightweighted Responsive Slider</h5>
						<div className="well bordered-top bordered-darkpink">
							<h6>Simple Slider</h6>
							<div id="sample-minimal" className="colored-blue slider-xs"></div>
							<div className="horizontal-space"></div>
							<div style={{"height":"20px"}}>
								<span className="label label-palegreen pull-left" id="minimal-label1"></span>
								<span className="label label-darkorange pull-right" id="minimal-label2"></span>
							</div>
							<hr className="wide" />
							<h6>Slider with One Handle</h6>
							<div id="sample-onehandle" className="slider-xs"></div>
							<hr className="wide" />
							<h6>One Handle Upper</h6>
							<div id="sample-onehandle-upper" className="slider-xs"></div>
							<hr className="wide" />
							<h6>Slider Sizes</h6>
							<div id="sizes">
								<div className="sized-slider bg-yellow slider-xs"></div>
								<div className="sized-slider bg-warning slider-sm"></div>
								<div className="sized-slider bg-lightred"></div>
								<div className="sized-slider bg-red slider-lg"></div>
								<div className="sized-slider bg-darkorange slider-xl"></div>
							</div>
							<hr className="wide" />
							<h6>Slider Colors</h6>
							<div id="colors">
								<div className="colored-slider bg-darkorange slider-xs"></div>
								<div className="colored-slider bg-blueberry slider-xs"></div>
								<div className="colored-slider bg-warning slider-xs"></div>
								<div className="colored-slider bg-info slider-xs"></div>
								<div className="colored-slider bg-danger slider-xs"></div>
								<div className="colored-slider bg-success slider-xs"></div>
							</div>
							<hr className="wide" />
							<h6>Sample Color Picker</h6>
							<div id="colorpicker">
								<div className="slider slider-xs bg-danger" id="red"></div>
								<div className="slider slider-xs bg-success" id="green"></div>
								<div className="slider slider-xs bg-primary" id="blue"></div>
								<div className="result"></div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var EighteightRow = React.createClass({
		componentDidMount: function() {
			$(".sized-rangeslider").rangeSlider();
			$(".colored-rangeslider").rangeSlider();
			$("#rangeslider").rangeSlider();
			$("#editrangeslider").editRangeSlider();
			$("#daterangeslider").dateRangeSlider();
			$("#noarrowsrangeslider").rangeSlider({ arrows: false });
			$("#boundsrangeslider").rangeSlider({ bounds: { min: 10, max: 90 } });
			$("#dvrangeslider").rangeSlider({ defaultValues: { min: 13, max: 66 } });
			$("#delayrangeslider").rangeSlider({ valueLabels: "change", delayOut: 4000 });
			$("#durationrangeslider").rangeSlider({ valueLabels: "change", durationIn: 1000, durationOut: 1000 });
			$("#disabledrangeslider").rangeSlider({ enabled: false });
			$("#steprangeslider").rangeSlider({ step: 10 });
			$("#labelsrangeslider").rangeSlider({ valueLabels: "hide" });
			$("#simlescalesrangeslider").rangeSlider({
				scales: [
				{
					first: function (val) { return val; },
					next: function (val) { return val + 10; },
					stop: function (val) { return false; },
					label: function (val) { return val; },
					format: function (tickContainer, tickStart, tickEnd) {
						tickContainer.addClass("myCustomClass");
					}
				},
				{
					first: function (val) { return val; },
					next: function (val) {
						if (val % 10 === 9) {
							return val + 2;
						}
						return val + 1;
					},
					stop: function (val) { return false; },
					label: function () { return null; }
				}]
			});
			var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
			$("#dateRulersExample").dateRangeSlider({
				bounds: { min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59) },
				defaultValues: { min: new Date(2012, 1, 10), max: new Date(2012, 4, 22) },
				scales: [{
					first: function (value) { return value; },
					end: function (value) { return value; },
					next: function (value) {
						var next = new Date(value);
						return new Date(next.setMonth(value.getMonth() + 1));
					},
					label: function (value) {
						return months[value.getMonth()];
					},
					format: function (tickContainer, tickStart, tickEnd) {
						tickContainer.addClass("myCustomClass");
					}
				}]
			});
		},
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well bordered-top bordered-palegreen">
							<h6>Simple Slider</h6>
							<div id="rangeslider" className="slider-xs"></div>
							<hr className="wide" />
							<h6>Without Arrows</h6>
							<div id="noarrowsrangeslider" className="slider-xs"></div>
							<h6>Without Value Labels</h6>
							<div id="labelsrangeslider" className="slider-xs"></div>
							<hr className="wide" />
							<h6>Default Values</h6>
							<div id="dvrangeslider" className="slider-xs"></div>
							<h6>Steps</h6>
							<div id="steprangeslider" className="slider-xs"></div>
							<h6>Bounds</h6>
							<div id="boundsrangeslider" className="slider-xs"></div>
							<hr className="wide" />
							<h6>Delay Out</h6>
							<div id="delayrangeslider" className="slider-xs"></div>
							<h6>Duration In/Out</h6>
							<div id="durationrangeslider" className="slider-xs"></div>
							<h6>Disabled</h6>
							<div id="disabledrangeslider" className="slider-xs"></div>
							<hr className="wide" />
							<h6>Editable Values</h6>
							<div id="editrangeslider" className="slider-xs"></div>
							<h6>Date Value Labels</h6>
							<div id="daterangeslider" className="slider-xs"></div>

						</div>
					</div>
					<div className="col-lg-6 col-sm-6 col-xs-12">
						<div className="well bordered-top bordered-warning">
							<h6>Slider Sizes</h6>
							<div className="sized-rangeslider slider-xs"></div>
							<div className="sized-rangeslider slider-sm"></div>
							<div className="sized-rangeslider"></div>

							<hr className="wide" />
							<h6>Slider Colors</h6>
							<div className="colored-rangeslider slider-xs valuelabel-blue silder-blue"></div>
							<div className="colored-rangeslider slider-xs valuelabel-yellow silder-yellow"></div>
							<div className="colored-rangeslider slider-xs valuelabel-darkorange silder-darkorange"></div>
							<div className="colored-rangeslider slider-xs valuelabel-blue silder-danger"></div>
							<div className="colored-rangeslider slider-xs valuelabel-warning silder-blueberry"></div>
							<div className="colored-rangeslider slider-xs valuelabel-palegreen silder-darkorange"></div>
							<div className="colored-rangeslider slider-xs valuelabel-darkorange silder-success"></div>
							<div className="colored-rangeslider slider-xs valuelabel-purple silder-magenta"></div>
							<div className="colored-rangeslider slider-xs valuelabel-magenta silder-silver"></div>
							<div className="colored-rangeslider slider-xs valuelabel-blue silder-warning"></div>
							<div className="colored-rangeslider slider-xs valuelabel-yellow silder-blueberry"></div>
							<div className="colored-rangeslider slider-xs valuelabel-purple silder-warning"></div>
							<div className="colored-rangeslider slider-xs valuelabel-silver silder-silver"></div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var NinthRow = React.createClass({
		render: function() {
			return (
				<div className="row">
					<div className="col-lg-12 col-sm-12 col-xs-12">
						<div className="well bordered-top bordered-blue">
							<h5>Simple Scale</h5>
							<div id="simlescalesrangeslider" className="valuelabel-yellow silder-yellow"></div>
							<hr className="wide" />
							<h5>Date Scale</h5>
							<div id="dateRulersExample" className="valuelabel-darkorange silder-darkorange"></div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var PageContent = React.createClass({
		fullScreenClick: function(e) {
			var element = document.documentElement;
			if (!$('body').hasClass("full-screen")) {
				$('body').addClass("full-screen");
				$('#fullscreen-toggler').addClass("active");
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
						element.webkitRequestFullscreen();
					} else if (element.msRequestFullscreen) {
						element.msRequestFullscreen();
					}
			} else {
				$('body').removeClass("full-screen");
				$('#fullscreen-toggler').removeClass("active");
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen();
				}
			}
		},
		sideBarClick: function(e) {
			$("#sidebar").toggleClass("hide");
			$(".sidebar-toggler").toggleClass("active");
			return false;
		},
		render: function() {
			return (
				<div className="page-content">

					<div className="page-breadcrumbs">
						<ul className="breadcrumb">
							<li>
								<i className="fa fa-home"></i>
								<a href="#">Home</a>
							</li>
							<li>
								<a href="#">Form Elements</a>
							</li>
							<li className="active">Data Pickers</li>
						</ul>
					</div>

					<div className="page-header position-relative">
						<div className="header-title">
							<h1>
								Forms
								<small>
									<i className="fa fa-angle-right"></i>
									Data Pickers
								</small>
							</h1>
						</div>

						<div className="header-buttons">
							<a className="sidebar-toggler" href="#" onClick={this.sideBarClick}>
								<i className="fa fa-arrows-h"></i>
							</a>
							<a className="refresh" id="refresh-toggler" href="">
								<i className="glyphicon glyphicon-refresh"></i>
							</a>
							<a className="fullscreen" id="fullscreen-toggler" href="#" onClick={this.fullScreenClick}>
								<i className="glyphicon glyphicon-fullscreen"></i>
							</a>
						</div>

					</div>

					<div className="page-body">
						<div className="row">
							<div className="col-lg-12 col-sm-12 col-xs-12">
								<h5 className="row-title before-blue"><i className="fa fa-tags blue"></i>Select and Tags Input</h5>
								<FirstRow />
								<h5 className="row-title before-red"><i className="glyphicon glyphicon-time red"></i>Date and Time Pickers</h5>
								<SecondRow />
								<ThirdRow />
								<h5 className="row-title before-sky"><i className="fa fa-square-o sky"></i>Text Area and Spinboxs</h5>
								<FourthRow />
								<h5 className="row-title before-darkpink"><i className="fa fa-upload darkpink"></i>DropzoneJs</h5>
								<FifthRow />
								<h5 className="row-title before-palegreen"><i className="fa fa-circle-o palegreen"></i>Jquery Knob</h5>
								<SixthRow />
								<SeventhRow />
								<h5 className="row-title before-magenta"><i className="fa fa-arrows-h magenta"></i>jQRangeSlider: Responsible Touch-Friendly Slider</h5>
								<EighteightRow />
								<h5 className="row-title before-blue"><i className="fa fa-sort blue"></i>jQRangeSlider Scales</h5>
								<NinthRow />
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var WholePage = React.createClass({
		render: function() {
			return (
				<div>
					<div className="loading-container">
						<div className="loader"></div>
					</div>
					<Navbar />
					<div className="main-container container-fluid">
						<div className="page-container">
							<PageSidebar />
							<ChatBar />
							<PageContent />
						</div>
					</div>
				</div>
			);
		}
	});
	
	
	ReactDOM.render(
		<WholePage />,
		document.getElementById('content')
		);
	</script>
	
    <!--Basic Scripts-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

    <!--Beyond Scripts-->
    <script src="assets/js/beyond.min.js"></script>

    <!--Page Related Scripts-->
    <!--Jquery Select2-->
    <script src="assets/js/select2/select2.js"></script>
    <!--Bootstrap Tags Input-->
    <script src="assets/js/tagsinput/bootstrap-tagsinput.js"></script>

    <!--Bootstrap Date Picker-->
    <script src="assets/js/datetime/bootstrap-datepicker.js"></script>

    <!--Bootstrap Time Picker-->
    <script src="assets/js/datetime/bootstrap-timepicker.js"></script>

    <!--Bootstrap Date Range Picker-->
    <script src="assets/js/datetime/moment.js"></script>
    <script src="assets/js/datetime/daterangepicker.js"></script>

    <!--Jquery Autosize-->
    <script src="assets/js/textarea/jquery.autosize.js"></script>

    <!--Fuelux Spinbox-->
    <script src="assets/js/fuelux/spinbox/fuelux.spinbox.min.js"></script>

    <!--jQUery MiniColors-->
    <script src="assets/js/colorpicker/jquery.minicolors.js"></script>

    <!--jQUery Knob-->
    <script src="assets/js/knob/jquery.knob.js"></script>

    <!--noUiSlider-->
    <script src="assets/js/slider/jquery.nouislider.js"></script>

    <!--jQRangeSlider-->
    <script src="assets/js/jquery-ui-1.10.4.custom.js"></script>
    <script src="assets/js/slider/jQRangeSlider/jQAllRangeSliders-withRuler-min.js"></script>
    
    <!--Dropzone-->
    <script src="assets/js/dropzone/dropzone.min.js"></script>

    <script>
        //--Jquery Select2--
        $("#e1").select2();
        $("#e2").select2({
            placeholder: "Select a State",
            allowClear: true
        });

        //--Bootstrap Date Picker--
        $('.date-picker').datepicker();

        //--Bootstrap Time Picker--
        $('#timepicker1').timepicker();

        //--Bootstrap Date Range Picker--
        $('#reservation').daterangepicker();

        //--JQuery Autosize--
        $('#textareaanimated').autosize({ append: "\n" });

        //--Fuelux Spinbox--
        $('.spinbox').spinbox();


        //--jQuery MiniColors--
        $('.colorpicker').each(function () {
            $(this).minicolors({
                control: $(this).attr('data-control') || 'hue',
                defaultValue: $(this).attr('data-defaultValue') || '',
                inline: $(this).attr('data-inline') === 'true',
                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                opacity: $(this).attr('data-opacity'),
                position: $(this).attr('data-position') || 'bottom left',
                change: function (hex, opacity) {
                    if (!hex) return;
                    if (opacity) hex += ', ' + opacity;
                    try {
                        console.log(hex);
                    } catch (e) { }
                },
                theme: 'bootstrap'
            });

        });


        //---Jquery Knob--
        $(".knob").knob();


        //---noUiSlider--
        $("#sample-minimal").noUiSlider({
            range: [0, 100],
            start: [20, 80],
            connect: true,
            serialization: {
                mark: ',',
                resolution: 0.1,
                to: [[$("#minimal-label1"), 'html'],
                      [$('#minimal-label2'), 'html']]
            }
        });

        $("#sample-onehandle").noUiSlider({
            range: [20, 100],
            start: 40,
            step: 20,
            handles: 1,
            connect: "lower",
            serialization: {
                to: [$("#low"), 'html']
            }
        });
        $("#sample-onehandle-upper").noUiSlider({
            range: [20, 100],
            start: 70,
            step: 20,
            handles: 1,
            connect: "upper",
            serialization: {
                to: [$("#low"), 'html']
            }
        });
        $('.slider').noUiSlider({
            range: [0, 255],
            start: 127,
            handles: 1,
            connect: "lower",
            orientation: "vertical",
            serialization: {
                resolution: 1
            }
            , slide: function () {

                var color = 'rgb(' + $("#red").val()
                     + ',' + $("#green").val()
                     + ',' + $("#blue").val()
                     + ')';

                $(".result").css({
                    background: color
                    , color: color
                });
            }
        });

        $(".sized-slider").noUiSlider({
            range: [0, 100],
            start: 50,
            handles: 1,
            connect: "lower",
            serialization: {
                to: [$("#low"), 'html']
            }
        });

        $(".colored-slider").noUiSlider({
            range: [0, 100],
            start: 30,
            handles: 1,
            connect: "lower",
            serialization: {
                to: [$("#low"), 'html']
            }
        });

        //--jQRangeSlider--
        $(".sized-rangeslider").rangeSlider();
        $(".colored-rangeslider").rangeSlider();
        $("#rangeslider").rangeSlider();
        $("#editrangeslider").editRangeSlider();
        $("#daterangeslider").dateRangeSlider();
        $("#noarrowsrangeslider").rangeSlider({ arrows: false });
        $("#boundsrangeslider").rangeSlider({ bounds: { min: 10, max: 90 } });
        $("#dvrangeslider").rangeSlider({ defaultValues: { min: 13, max: 66 } });
        $("#delayrangeslider").rangeSlider({ valueLabels: "change", delayOut: 4000 });
        $("#durationrangeslider").rangeSlider({ valueLabels: "change", durationIn: 1000, durationOut: 1000 });
        $("#disabledrangeslider").rangeSlider({ enabled: false });
        $("#steprangeslider").rangeSlider({ step: 10 });
        $("#labelsrangeslider").rangeSlider({ valueLabels: "hide" });
        $("#simlescalesrangeslider").rangeSlider({
            scales: [
            // Primary scale
            {
                first: function (val) { return val; },
                next: function (val) { return val + 10; },
                stop: function (val) { return false; },
                label: function (val) { return val; },
                format: function (tickContainer, tickStart, tickEnd) {
                    tickContainer.addClass("myCustomClass");
                }
            },
            // Secondary scale
            {
                first: function (val) { return val; },
                next: function (val) {
                    if (val % 10 === 9) {
                        return val + 2;
                    }
                    return val + 1;
                },
                stop: function (val) { return false; },
                label: function () { return null; }
            }]
        });
        var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
        $("#dateRulersExample").dateRangeSlider({
            bounds: { min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59) },
            defaultValues: { min: new Date(2012, 1, 10), max: new Date(2012, 4, 22) },
            scales: [{
                first: function (value) { return value; },
                end: function (value) { return value; },
                next: function (value) {
                    var next = new Date(value);
                    return new Date(next.setMonth(value.getMonth() + 1));
                },
                label: function (value) {
                    return months[value.getMonth()];
                },
                format: function (tickContainer, tickStart, tickEnd) {
                    tickContainer.addClass("myCustomClass");
                }
            }]
        });
    </script>

    

</body>
<!--  /Body -->
</html>
